<form class="area" style="padding-bottom:40px;">
    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">标题</label></dt>
        <dd class="opCon">
            <input type="text" name="title" id="title" class="txt" placeholder="请输入标题" value="">
            <p class="tip"></p>
        </dd>
    </dl>
    <dl class="optBox mt20">
        <dt class="opt"><label class="lb" for="">素材</label></dt>
        <dd class="opCon">
            <div id="uploader-demo">
                <!--用来存放item-->
                <input type="hidden" id="img"  value="" />
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker"  >选择图片</div>
            </div>
        </dd>
    </dl>
    <p class="mt20 tc"><input type="button"  value="提交"   id="add"  /> <input type="button"  value="返回"  class="btn-back"  /></p>
</form>


<input type="hidden" id="ajaxAdd" value="{{url("material/ajaxMaterialAdd")}}">
<input type="hidden" id="groupId" value="<?php echo $this->request->get('groupId'); ?>">
<link rel="stylesheet" type="text/css" href="{{constant('ADMIN_JS_PATH')}}webuploader-0.1.5/webuploader.css">

<script type="text/javascript" src="{{constant('ADMIN_JS_PATH')}}webuploader-0.1.5/webuploader.nolog.js"></script>
<script>
var dir = "";
var service = "";
var fileName = "";
// 初始化Web Uploader
var uploader = WebUploader.create({
    // 选完文件后，是否自动上传。
    auto: true,
    // swf文件路径
    swf: "{{constant('ADMIN_JS_PATH')}}webuploader-0.1.5/Uploader.swf",
    // 文件接收服务端。
//    server: 'http://testimg-xuzhong.oss-cn-shanghai.aliyuncs.com',
    // 选择文件的按钮。可选。
    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
    pick: '#filePicker',
    // 只允许选择图片文件。
//    accept: {
//        title: 'Images',
//        extensions: 'gif,jpg,jpeg,bmp,png',
//        mimeTypes: 'image/jpg,image/jpeg,image/png'
//    }

});


// 当有文件添加进来的时候
uploader.on('fileQueued', function (file) {
    $.ajax({
        url: '{{url("Sysconfig/getOssSign")}}?type=3',
        type: 'get',
        async: false, //使用同步的方式,true为异步方式
        success: function (res) {
            res = res.data;
            dir = res.dir;
            service = res.domain;
            uploader.option('formData', {
                "success_action_status": 200,
                "OSSAccessKeyId": res.accessid,
                "policy": res.policy,
                "signature": res.signature
            });
            uploader.option("server", res.domain)
//            console.log(uploader)
            //code here...
        },
        dataType: 'json'
    });
    fileName = calculate_object_name(file.name);
    $("#title").val(file.name.substring(0, file.name.lastIndexOf('.')));
    console.log(file.name.substring(0, file.name.lastIndexOf('.')));
    uploader.option('formData', {
        "key": dir + fileName,
    });
    var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + service + "/" + dir + fileName + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');
    // $list为容器jQuery实例
    $("#fileList").html($li);
    $("#img").val(service + "/" + dir + fileName);
    // 创建缩略图
    // 如果为非图片文件，可以不用调用此方法。
    // thumbnailWidth x thumbnailHeight 为 100 x 100
    var thumbnailWidth = 400;
    var thumbnailHeight = 300;
    uploader.makeThumb(file, function (error, src) {
        if (error) {
            $img.replaceWith('<span>不能预览</span>');
            return;
        }

        $img.attr('src', src);
    }, thumbnailWidth, thumbnailHeight);
});
// 文件上传过程中创建进度条实时显示。
uploader.on('uploadProgress', function (file, percentage) {
    var $li = $('#' + file.id),
            $percent = $li.find('.progress span');
    // 避免重复创建
    if (!$percent.length) {
        $percent = $('<p class="progress"><span></span></p>')
                .appendTo($li)
                .find('span');
    }

    $percent.css('width', percentage * 100 + '%');
});
// 文件上传成功，给item添加成功class, 用样式标记上传成功。
uploader.on('uploadSuccess', function (file) {
    $('#' + file.id).addClass('upload-state-done');
});
// 文件上传失败，显示上传出错。
uploader.on('uploadError', function (file) {
    var $li = $('#' + file.id),
            $error = $li.find('div.error');
    // 避免重复创建
    if (!$error.length) {
        $error = $('<div class="error"></div>').appendTo($li);
    }

    $error.text('上传失败');
});
// 完成上传完了，成功或者失败，先删除进度条。
uploader.on('uploadComplete', function (file) {
    $('#' + file.id).find('.progress').remove();
});

function random_string(len) {
    len = len || 32;
    var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
    var maxPos = chars.length;
    var pwd = '';
    for (i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

function get_suffix(filename) {
    pos = filename.lastIndexOf('.')
    suffix = ''
    if (pos != -1) {
        suffix = filename.substring(pos)
    }
    return suffix;
}

function calculate_object_name(filename)
{
    var timestamp = Date.parse(new Date()) / 1000;

    suffix = get_suffix(filename)
    g_object_name = random_string(10) + timestamp + suffix
    return g_object_name;
}

$(window).load(function () {
    $('#add').click(function () {
        var title = $("#title").val();
        var url = $("#img").val();
        var groupId = $("#groupId").val();
        var ajaxAddUrl = $("#ajaxAdd").val();
        var json = {
            "title": title,
            "url": url,
            "groupId": groupId,
        };
        var successFunction = function (data) {
            if (data.status == 200) {
                alert("添加成功");
                window.location.href = "{{url('material/material')}}" + "?id=" + $("#groupId").val();
            } else if (data.status == -1) {
                alert(data.info);
            }
        };
        var errorFunction = function () {

        };
        $.ajax({
            url: ajaxAddUrl,
            data: json,
            type: "post",
            error: errorFunction,
            success: successFunction
        });
    });
});



</script>

